<template>
  <div>
    <div>
      <el-form class="form-container" :model="form">
        <el-form-item
          label="关键字"
          label-width="60px"
          style="width: 280px"
          inline>
          <el-input placeholder="请输入学号、姓名、手机号、身份证号码等关键字" v-model="form.keyword"></el-input>
        </el-form-item>
        <el-form-item label="性别" label-width="60px" prop="gender">
          <el-radio-group v-model="form.gender">
            <el-radio-button label="不限" value="0" />
            <el-radio-button label="男" value="1" />
            <el-radio-button label="女" value="2" />
          </el-radio-group>
        </el-form-item>
		<el-form-item   label="状态" label-width="60px" prop="status">
			<el-select placeholder="请选择状态"  v-model="form.status" style="width: 120px;"  >
				<el-option label="全部"  value="0"></el-option>
				<el-option label="正常" value="1"></el-option>
				<el-option label="休学" value="2"></el-option>
				<el-option label="停学" value="3"></el-option>
				<el-option label="毕业" value="4"></el-option>
			</el-select>
		</el-form-item>
        <el-form-item class="inline-form-item">
          <el-button
            type="primary"
            color="green"
            :icon="Search"
            title="查询学生" @click="reloadPageList"></el-button>
        </el-form-item>
      </el-form>
    </div>
    <div style="text-align: right; margin-bottom: 2px">
      <el-button
        type="primary"
        :icon="Plus"
        title="创建学生"
        @click="showCreateDialog"
      ></el-button>
    </div>
    <el-table
      :data="tableData"
      stripe
      border
      style="width: 100%"
      class="el-table"
      :highlight-current-row="true"
      empty-text="未查询任何学生信息"
    >
      <el-table-column
        label="序号"
        header-align="center"
        width="60"
        align="right">
        <template #default="scope">
          <span>{{ scope.$index + 1 }}</span>
        </template>
      </el-table-column>
	  <el-table-column prop="stuNo" label="学号" header-align="center" />
      <el-table-column prop="name" label="姓名" header-align="center" />
      <el-table-column prop="nationality" label="民族" header-align="center" />
      <el-table-column prop="classInfo.className" label="班级" header-align="center" />
	   <el-table-column prop="political" label="政治面貌" header-align="center" />
      <el-table-column prop="gender" label="性别" header-align="center" align="center">
        <template #default="scope">
          <span v-if="1 == scope.row.gender">
            <span style="color: blue">男</span>
          </span>
          <span v-else-if="2 == scope.row.gender">
            <span style="color: red">女</span>
          </span>
          <span v-else>
            <span style="color: gold">未知</span>
          </span>
        </template>
      </el-table-column>
	  <el-table-column prop="status" label="状态" header-align="center" align="center">
        <template #default="scope">
          <span v-if="1 == scope.row.status">
            <span style="color: blue">正常</span>
          </span>
          <span v-else-if="2 == scope.row.status">
            <span style="color: orangered">休学</span>
          </span>
		  <span v-else-if="3 == scope.row.status">
            <span style="color: red">停学</span>
          </span>
		   <span v-else-if="4 == scope.row.status">
            <span style="color: gold">毕业</span>
          </span>
          <span v-else>
            <span style="color: gold">未知</span>
          </span>
        </template>
      </el-table-column>
      <el-table-column label="操作" header-align="center">
        <template #default="scope">
          <el-button
            type="info"
            :icon="ZoomIn"
            title="详情"
            color="green"
            @click="showDetailsDialog(scope.$index)"
          ></el-button>
          <el-button
            type="primary"
            :icon="Edit"
            title="修改"
            @click="showModifyDialog(scope.$index)"
          ></el-button>
          <el-button
            type="danger"
            :icon="Delete"
            title="删除"
            @click="showDeleteDialog(scope.$index)"
          ></el-button>
        </template>
      </el-table-column>
    </el-table>
	<PaginationUI @query:page="queryPageList" ref="pagination"></PaginationUI>
    <!-- 删除确认框开始 -->
    <el-dialog
      v-model="deleteDialogVisiable"
      title="删除员工"
      width="500"
      :close-on-click-modal="false"
      destroy-on-close
      center
    >
      <span>确认要删除员工【{{ current.name }}】吗?</span>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="deleteDialogVisiable = false">取消</el-button>
          <el-button type="primary" @click="deleteStudent">确定</el-button>
        </div>
      </template>
    </el-dialog>
    <!-- 删除确认框结束 -->
    <!-- 创建学生对话框 -->
    <CreateDialog ref="createDialog"></CreateDialog>
    <!-- 修改学生对话框 -->
    <ModifyDialog ref="modifyDialog"></ModifyDialog>
    <!-- 显示学生详细信息-->
    <DetailsDialog ref="detailsDialog"></DetailsDialog>
  </div>
</template>

<script setup>
import api from "@api/index.js";
//导入图标
import { ZoomIn, Plus, Delete, Edit, Search } from "@element-plus/icons-vue";
import { ref ,onMounted } from "vue";
import { ElMessage } from "element-plus";
//创建学生对话框
import CreateDialog from "./CreateDialog.vue";
//修改学生对话框
import ModifyDialog from "./ModifyDialog.vue";
//导入分页查询的控件
import PaginationUI from "@views/common/PaginationUI.vue"
//显示学生详细信息
//删除Dialog对话框是否可见
const deleteDialogVisiable = ref(false);
//当前操作对象
const current = ref({});
//查询表单响应数据
const form = ref({
  gender: '0',
  keyword: '',
  status:'0'
});
//当前删除记录索引
const tableData = ref([
  {
    contact: "张父",
    contactPhone: "13900139001",
    createTime: "2025-08-04 13:53:08",
    createUserId: 1,
    email: "zhangyi001@example.com",
    gender: 1,
    idCard: "110101199801010011",
    name: "张一",
    nationality: "汉族",
    nativePlace: "北京市东城区",
    password: "e10adc3949ba59abbe56e057f20f883e",
    phone: "13800138001",
    political: "群众",
    recordStatus: 1,
    registeredAddress: "北京市东城区001街道",
    relationship: "父亲",
    remark: "",
    remarkInfo: "",
    status: 1,
    stuId: 102,
    stuNo: "2025000001",
    updateTime: "2025-08-04 13:53:08",
    updateUserId: 1,
    classInfo: {
      classDesc: "",
      classId: 1,
      className: "英语2301班",
      classNo: "FL20230001",
    },
  },
]);
let createDialog = ref(null);
let modifyDialog = ref(null);
let detailsDialog = ref(null);
let pagination = ref(null);
//打开删除学生对话框
const showDeleteDialog = (rowIndex) => {
  current.value = tableData.value[rowIndex];
  deleteDialogVisiable.value = true;
  //记录待删除的学生记录索引
  current.value.rowIndex = rowIndex;
};
//打开修改学生对话框
const showModifyDialog = (rowIndex) => {
  modifyDialog.value.dialogVisible = true;
  modifyDialog.value.form = tableData.value[rowIndex];
};
//打开显示详细信息对话框
const showDetailsDialog = (rowIndex) => {
  detailsDialog.value.dialogVisible = true;
  detailsDialog.value.student = tableData.rowIndex[rowIndex];
};
//打开创建学生对话框
const showCreateDialog = () => {
  createDialog.value.dialogVisible = true;
};
//删除学生
const deleteStudent = () => {
  deleteDialogVisiable.value = false;
  let rowIndex = current.value.rowIndex;
  tableData.value.splice(rowIndex, 1);
  ElMessage({ message: "删除成功", type: "success" });
};
//分页查询学生
const queryPageList=async (data)=>{
	//打包分页参数和查询条件
    let params={};
	let keyword=form.value.keyword;
	if(keyword!==null && ''!==keyword){
      params.keyword=keyword;
	}
	let gender=form.value.gender;//性别
	if('0'!==gender)
	{
     params.gender=gender;
	}
	let status=form.value.status;
	if('0'!==status){
      params.status=status;
	}

    params.current=data.current;//当前页
	params.size=data.size;//每页条数
	let responseData=await api.student.queryPage(params);
	if(200!==responseData.code){
		ElMessage({message:'查询学生数据失败',type:'error'});
		return;
	}
	let list=responseData.data.records;
	if(list===null || 0===list.length){
		ElMessage({message:'当前页没有数据',type:'warning'});
		tableData.value=[];
		return;
	}else{
		tableData.value=list;
	}
	//设置总记录条数
	pagination.value.total=responseData.data.total;
}
//重新从第1页开始查询学生数据
const  reloadPageList=()=>{
	queryPageList({current:1,size:10});
}

//组件加载时触发
onMounted(()=>{
	reloadPageList();
})
</script>
<style scoped>
.form-container {
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
}
.inline-form-item {
  margin-left: 20px;
}
</style>